<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的关注</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
    <link rel="stylesheet" href="${path}/static/web/style/ICalendar.css">
</head>
<body>
    <!-- 导航 -->
    <%@ include file="/static/web/jsp/top.jsp"%>

    <div class="model_container">
        <div class="link_sprite">当前位置：<a href="">首页</a> &#155; <a href="">我的关注</a> &#155; <a href="" class="link_last">艺术品</a></div>
    </div>

    <!-- 详情内容 -->
    <div class="container" id="mineFocusController" v-cloak>

        <div class="focus_tabs">
            <a class="focus_item" :class="{'active':type==1}" @click="changeType(1)" href="javascript:void(0);"><span>艺术品</span></a>
            <a class="focus_item" :class="{'active':type==2}" @click="changeType(2)" href="javascript:void(0);"><span>艺术家</span></a>
        </div>
        <!-- 艺术品 -->
        <div class="focus_content" v-show="type==1" >
            <div class="waterfull clearfloat" id="waterfull">
                <div class="no_data" v-show="arts.list.length == 0">
                    <img src="${path}/static/web/images/no_data.png"/>
                    <p>暂无数据哦，去看看其他的吧</p>
                </div>
                <ul v-show="arts.list.length > 0">
                    <li class="item" v-for="(item,index) in arts.list" @click="jumpAuction(item)" :class="[item.page+'page']" :style="{opacity:0}">
                        <a href="#" class="a-img">
                            <img src="${path}/static/web/images/waterfull_01.png" alt="" v-sy-img="item.goodsImg">
                        </a>
                        <div class="content">
                            <div class="item_head">
                                <h3 class="title">{{item.goodsName}}</h3>
                                <div class="label">
                                    <i class="icon icon_nation" v-if="item.conNum"></i>
                                    <i class="icon icon_author" v-if="item.goodsUploadUserId"></i>
                                    <i class="icon icon_link" v-if="item.ethOpType == 1"></i>
                                </div>
                            </div>
                            <div class="info">
                                <span class="author">作者：{{item.artName}}</span>
                                <span class="year">{{item.goodsTime.substring(0,4)}}年</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="imloading" class="img_loading">
                加载中.....
            </div>
        </div>
        <!-- 艺术家 -->
        <div class="focus_content" v-show="type==2" v-infinite-scroll="loadArtists" infinite-scroll-disabled="artists.busy" infinite-scroll-distance="0">
            <div class="no_data" v-show="artists.list.length == 0">
                <img src="${path}/static/web/images/no_data.png"/>
                <p>暂无数据哦，去看看其他的吧</p>
            </div>
            <div v-show="artists.list.length > 0" class="artist_item" v-for="item in artists.list">
                <div class="artist_side">
                    <a href="" :href="'${path}/web/artist/'+item.id"><img class="artist_avatar" src="${path}/static/web/images/author.png" v-sy-img="item.artImg"/></a>
                    <%--<a class="artist_focus focus_on" href="javascript:void(0);" data-id='1' v-show="item.isFocus == 0">关注</a>--%>
                    <%--<a class="artist_focus" href="javascript:void(0);" data-id='2' v-show="item.isFocus == 1">已关注</a>--%>
                </div>
                <div class="artist_aside">
                    <div class="artist_works" v-if="item.goodsImgS">
                        <ul>
                            <li v-for="(img,index) in item.goodsImgS.split(',')" v-if="index < 4"><img src="${path}/static/web/images/pro_slide01.png" v-sy-img="img"></li>
                        </ul>
                    </div>

                    <div class="artist_profile">
                        <h3 class="name"><a href="#">{{item.userName}}</a><i class="icon icon_art"></i><i class="icon icon_vip"></i></h3>
                        <p class="profile">{{item.artInfo}}</p>
                        <a href="#" :href="'${path}/web/artist/'+item.id" class="about_more mt_20">更多作品</a>
                    </div>
                </div>
            </div>
        </div>


    </div>
        

    <!-- 客服 -->
    <%@ include file="/static/web/jsp/footer.jsp"%>

</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/slide.js"></script>
<script src="${path}/static/web/js/carousel.js"></script>
<script src="${path}/static/web/js/ICalendar.js"></script>

<script src="${path}/static/web/js/jquery.masonry.min.js"></script>
<script src="${path}/static/web/js/jQeasing.js"></script>

<script src="${path}/static/web/js/art.js"></script>
<script src="${path}/static/web/js/biz/mine_focus.js"></script>
<script type="text/javascript">

        <%--$(function(){--%>
                <%--/*瀑布流开始*/--%>
                <%--var container = $('.waterfull ul');--%>
                <%--var loading=$('#imloading');--%>
                <%--// 初始化loading状态--%>
                <%--loading.data("on",true);--%>
                <%--/*判断瀑布流最大布局宽度，最大为1280*/--%>
                <%--function tores(){--%>
                    <%--var tmpWid=$(window).width();--%>
                    <%--if(tmpWid>1280){--%>
                        <%--tmpWid=1280;--%>
                    <%--}else{--%>
                        <%--var column=Math.floor(tmpWid/320);--%>
                        <%--tmpWid=column*320;--%>
                    <%--}--%>
                    <%--$('.waterfull').width(tmpWid);--%>
                <%--}--%>
                <%--tores();--%>
                <%--$(window).resize(function(){--%>
                    <%--tores();--%>
                <%--});--%>
                <%--container.imagesLoaded(function(){--%>
                  <%--container.masonry({--%>
                    <%--columnWidth: 320,--%>
                    <%--itemSelector : '.item',--%>
                    <%--isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false--%>
                    <%--isAnimated: true,//是否采用jquery动画进行重拍版--%>
                    <%--isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右--%>
                    <%--isResizable: true,//是否自动布局默认true--%>
                    <%--animationOptions: {--%>
                        <%--duration: 800,--%>
                        <%--easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化--%>
                        <%--queue: false//是否队列，从一点填充瀑布流--%>
                    <%--}--%>
                  <%--});--%>
                <%--});--%>
                <%--/*模拟从后台获取到的数据*/--%>
                <%--var sqlJson=[--%>
                    <%--{--%>
                        <%--'title':'温馨的家1',--%>
                        <%--'author':'李浩然',--%>
                        <%--'src':'${path}/static/web/images/waterfull_01.png',--%>
                        <%--'price':'123',--%>
                        <%--'year':'1895年',--%>
                        <%--'time':'2018-02-03 12:32:21'--%>
                    <%--},--%>
                    <%--{--%>
                        <%--'title':'温馨的家2',--%>
                        <%--'author':'李浩然',--%>
                        <%--'src':'${path}/static/web/images/waterfull_02.png',--%>
                        <%--'price':'123',--%>
                        <%--'year':'1895年',--%>
                        <%--'time':'2018-02-03 12:32:21'--%>
                    <%--},{--%>
                        <%--'title':'温馨的家3',--%>
                        <%--'author':'李浩然',--%>
                        <%--'src':'${path}/static/web/images/waterfull_03.png',--%>
                        <%--'price':'123',--%>
                        <%--'year':'1895年',--%>
                        <%--'time':'2018-02-03 12:32:21'--%>
                    <%--},--%>
                    <%--{--%>
                        <%--'title':'温馨的家4',--%>
                        <%--'author':'李浩然',--%>
                        <%--'src':'${path}/static/web/images/waterfull_04.png',--%>
                        <%--'price':'123',--%>
                        <%--'year':'1895年',--%>
                        <%--'time':'2018-02-03 12:32:21'--%>
                    <%--}];--%>
                <%--/*用sqlJson来模拟一下数据*/--%>
                <%--$(window).scroll(function(){--%>
                    <%--if(!loading.data("on")) return;--%>
                    <%--// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求--%>
                    <%--var itemNum=$('#waterfull').find('.item').length;--%>
                    <%--var itemArr=[];--%>
                    <%--itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;--%>
                    <%--itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;--%>
                    <%--itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;--%>
                    <%--var maxTop=Math.max.apply(null,itemArr);--%>
                    <%--if(maxTop<$(window).height()+$(document).scrollTop()){--%>
                        <%--//加载更多数据--%>
                        <%--loading.data("on",false).fadeIn(800);--%>
                        <%--(function(sqlJson){--%>
                            <%--/*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/--%>
                            <%--if(itemNum>30){--%>
                                <%--loading.text('就有这么多了！');--%>
                            <%--}else{--%>
                                <%--var html="";--%>
                                <%--for(var i in sqlJson){--%>
                                    <%--html+="<li class='item'><a href='####' class='a-img'><img src='"+sqlJson[i].src+"'></a>";--%>
                                    <%--html+="<div class='content'><div class='item_head'><h3 class='title'>"+sqlJson[i].title+"</h3>";--%>
                                    <%--html+='<div class="label"><i class="icon icon_nation"></i><i class="icon icon_author"></i><i class="icon icon_link"></i></div></div>';--%>
                                    <%--html+="<div class='info'><span class='author'>作者："+sqlJson[i].author+"</span><span class='year'>"+sqlJson[i].year+"</span></div></div>";--%>
                                    <%--html+="</li>";--%>
                                <%--}--%>
                                <%--/*模拟ajax请求数据时延时800毫秒*/--%>
                                <%--var time=setTimeout(function(){--%>
                                    <%--$(html).find('img').each(function(index){--%>
                                        <%--loadImage($(this).attr('src'));--%>
                                    <%--})--%>
                                    <%--var $newElems = $(html).css({ opacity: 0}).appendTo(container);--%>
//                                    $newElems.imagesLoaded(function(){
//                                        $newElems.animate({ opacity: 1},800);
//                                        container.masonry( 'appended', $newElems,true);
//                                        loading.data("on",true).fadeOut();
//                                        clearTimeout(time);
//                                    });
                                <%--},800)--%>
                            <%--}--%>
                        <%--})(sqlJson);--%>
                    <%--}--%>
                <%--});--%>
                <%--function loadImage(url) {--%>
                     <%--var img = new Image(); --%>
                     <%--//创建一个Image对象，实现图片的预下载--%>
                      <%--img.src = url;--%>
                      <%--if (img.complete) {--%>
                         <%--return img.src;--%>
                      <%--}--%>
                      <%--img.onload = function () {--%>
                        <%--return img.src;--%>
                      <%--};--%>
                 <%--};--%>
        <%--})--%>
        


</script>  
</html>